<template>
	<view>
		<uni-nav-bar left-text="取消" right-text="保存" title="新建商机" @clickRight="clickRight" @clickLeft="clickLeft"></uni-nav-bar>

		<!-- umodal 左键弹出-->
		<u-modal
			v-model="modalshow"
			width="70%"
			title="退出确认"
			:show-cancel-button="true"
			:content="content"
			:content-style="modalstyle"
			@confirm="confirm"
			@cancel="cancel"
		></u-modal>

		<!-- 客户名称 -->
		<!-- u-form -->
		<view class="formborder">
			<view class="formmain">
				<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
					<!-- 查重 -->
					<view class="firstform">
						<u-input placeholder="输入商品标题"></u-input>
						<!-- <view class="firstone">
							<u-icon name="search"></u-icon>
							<text>查重</text>
						</view> -->
					</view>

					<view class="formone">
						<u-form-item label="关联客户" prop="guan" label-width="130rpx" right-icon="arrow-right">
							<text style="color:#fa3534;">*</text>
							<u-input @click="showselect = true" v-model="form.iguan" right-text="ddddd" input-align="right" placeholder="点击选择" :disabled="true" />
						</u-form-item>
						<!-- 尊称 -->
						

						<!--  -->
						<u-form-item label="负责销售" prop="charge" label-width="130rpx" right-icon="arrow-right">
							<text style="color:#fa3534;">*</text>
							<u-input @click="showselect = true" v-model="form.charge" right-text="ddddd" input-align="right" placeholder="点击选择" :disabled="true" />
						</u-form-item>
						<!-- 角色 -->
					
						<!--  -->
						<u-form-item label="销售阶段" prop="range" label-width="130rpx" right-icon="arrow-right">
							<text style="color:#fa3534;">*</text>
							<u-input @click="rangeselect = true" v-model="form.range" right-text="ddddd" input-align="right" placeholder="点击选择" :disabled="true" />
						</u-form-item>
						<!-- 生日 -->
						<u-form-item label="成交几率" prop="jlv" label-width="130rpx" right-icon="arrow-right">
							<text style="color:#fa3534;">*</text>
							<u-input @click="jilvselect = true" v-model="form.jlv" right-text="ddddd" input-align="right" placeholder="点击选择" :disabled="true" />
						</u-form-item>
						<!-- 关联产品 -->
						<u-form-item label="关联产品" prop="product" label-width="130rpx" right-icon="arrow-right">
							<text style="color:#fa3534;">*</text>
							<u-input @click="showselect = true" v-model="form.product" right-text="ddddd" input-align="right" placeholder="点击选择" :disabled="true" />
						</u-form-item>
					</view>
				<!-- </u-form> -->
				<!-- 关联产品图 -->
				<view class="guanliancp">
					<view class="tabtab">
						<view class="tabletr">
							<view class="tabletd">产品名称</view>
							<view class="tabletd">产品类型</view>
							<view class="tabletd">产品价格</view>
							<view class="tabletd">工作时间</view>
							<view class="tabletd">操作</view>
						</view>
						<view class="tabletr" v-for="(item, index) in productdata" :key="index">
							<view class="tabletd">{{ item[0] }}</view>
							<view class="tabletd">{{ item[1] }}</view>
							<view class="tabletd"><input type="text" v-model="item[2]" /></view>
							<view class="tabletd"><input type="text" v-model="item[3]" /></view>
							<view class="tabletd" @click="deldata(index)">
								<view class="" style="margin:0 auto;background-color:#169BD5 ;border-radius:5px ;width: 80rpx;height: 40rpx;color: #FFFFFF;">删除</view>
							</view>
						</view>
					</view>
					<!-- 	总天数 -->
					<view class="daterules">
						<view class="date1">
							<view class="" style="">总天数:</view>
							<input
								style="display: inline-block;width: 70rpx;border: 1px solid #000000;height: 20rpx;line-height: 20rpx;font-size: 16px;"
								type="text"
								v-model="totaldays"
							/>
							<view class="">天</view>
						</view>
						<view class="date1" style="margin-left: 20rpx;">
							<view class="">折扣:</view>
							<view class="dateborder" style="width: 74rpx; height: 40rpx;">
								<input style="display:inline-block; width: 100%;height:100%;border: 1px solid #000000;" type="text" v-model="totaldiscount" />
							</view>
							<view class="">%</view>
						</view>
					</view>
				</view>

				<!-- 总金额 -->
				<view class="" style="margin-left: 520rpx;">总金额:{{ finallyprice }}元</view>
				<!-- 年限收费 -->
				<view class="agelimit">
					<text style="line-height:100rpx ;">年限收费</text>
					<view class=""><textarea style="font-size: 14px; " placeholder-style="color:#CCCCCC;" v-model="nianxian" placeholder="请输入备注信息" /></view>
				</view>
				<!-- 备注信息 -->
				<view class="agelimit agemargin">
					<text style="line-height:100rpx ;">备注信息</text>
					<view class=""><textarea style="font-size: 14px; " placeholder-style="color:#CCCCCC;" v-model="beizhu" placeholder="请输入备注信息" /></view>
				</view>
				<!-- 富文本 -->
				<view class="richlimit agemargin">
				<Editor @blurcontent="editorblur"></Editor>
				</view>
				<!-- 商机来源 -->
				<u-form-item label="商机来源" prop="source" label-width="130rpx" right-icon="arrow-right">
					<text style="color:#fa3534;">*</text>
					<u-input @click="sourceselect = true" v-model="form.source" right-text="ddddd" input-align="right" placeholder="点击选择" :disabled="true" />
				</u-form-item>
				</u-form>
				
				
				<!-- 弹出区域 rangeselect-->
				<u-select v-model="jilvselect" :list="jlvlist" @confirm="jlvconfirm"></u-select>
				<u-select v-model="rangeselect" :list="rangelist" @confirm="rangeconfirm"></u-select>
				<u-select v-model="sourceselect" :list="sourcelist" @confirm="sourceconfirm"></u-select>
			</view>
		</view>
	</view>
	<!-- form -->
</template>
<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import Editor  from '@/pages/editor/editor.vue';
export default {
	data() {
		return {
			sourcelist:[
					{
						value: '1',
						label: '电话营销'
					},
					{
						value: '2',
						label: '主动来电'
					},
					{
						value: '3',
						label: '客户介绍'
					},
					{
						value: '4',
						label: '朋友介绍'
					},
					{
						value: '5',
						label: '独立开发'
					},
					{
						value: '6',
						label: '网络搜索'
					},
					{
						value: '7',
						label: '广告杂志'
					},
					{
						value: '8',
						label: '展会促销'
					},
					{
						value: '9',
						label: '其他途径'
					},
					
				],
			//阶段列表
			rangelist:[
					{
						value: '1',
						label: '初步洽谈'
					},
					{
						value: '2',
						label: '深入沟通'
					},
					{
						value: '3',
						label: '合同生成'
					},
					{
						value: '4',
						label: '流水商机'
					},
				],
			jlvlist:[
					{
						value: '1',
						label: '10%'
					},
					{
						value: '2',
						label: '20%'
					},
					{
						value: '3',
						label: '30%'
					},
					{
						value: '4',
						label: '40%'
					},
					{
						value: '5',
						label: '50%'
					},
					{
						value: '6',
						label: '60%'
					},
					{
						value: '7',
						label: '70%'
					},
					{
						value: '8',
						label: '80%'
					},
					{
						value: '9',
						label: '90%'
					},
					{
						value: '10',
						label: '100%'
					}
				],
			sourceselect:false,//来源弹出层
			rangeselect:false,//阶段弹出层
			jilvselect:false,//几率弹出层
			editordata:'',//子组件传递的值
			beizhu:'', //备注信息
			nianxian:'',//年限收费
			sth: '',
			pricearr: [],
			finallyprice: 0, //最后呈现价格
			totaldays: 0, //总天数
			totalprice: 0, //总价格
			totaldiscount: 100, //总折扣
			zkinput: '', //折扣
			tianshuinput: '', //天数
			productdata: '', //产品table表格数据
			taskremind: false,
			form: {
				name: '',
				guan:'',
				jlv: '', //表单验证几率
				charge:'', //负责
				range:'', //阶段
				product:'',//产品
				source:'',//来源
			},
			
			required: true,
			rules: {
				jlv: [
					{
						required: true,
						message: '此为必填字段',
						trigger: 'blur' /* , 'change'] */
					}
				],
				guan: [
					{
						required: true,
						message: '此为必填字段',
						trigger: 'blur' /* , 'change'] */
					}
				],
				charge: [
					{
						required: true,
						message: '此为必填字段',
						trigger: 'blur' /* , 'change'] */
					}
				],range: [
					{
						required: true,
						message: '此为必填字段',
						trigger: 'blur' /* , 'change'] */
					}
				],product: [
					{
						required: true,
						message: '此为必填字段',
						trigger: 'blur' /* , 'change'] */
					}
				],
				source: [
					{
						required: true,
						message: '此为必填字段',
						trigger: 'blur' /* , 'change'] */
					}
				],
				numb: [
					{
						pattern: /^[0-9]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字'
					}
				],
				
			},
			errorType: ['message'],
		
			checked: false,
			modalshow: false,
			content: '资料尚未保存,是否取消编辑?',
			modalstyle: {
				fontSize: '26rpx'
			},
			type: 'select',
			sheetshow: false,
			showcal: false,
			mode: 'date',
			showzwu: false,
			
			sourceshow: false,
			statusshow: false,
			statuslist: [
				{
					value: '1',
					label: '初步意向'
				},
				{
					value: '2',
					label: '下次邀约'
				},
				{
					value: '3',
					label: '已转客户'
				}
			],
			followTimeclick: false,
			taskremind: false,
			showtaskremind: false,
			
			yanzheng: 'false'
		};
	},
	methods: {
		deldata(index){
			this.productdata.splice(index,1)
			this.productdata=[...this.productdata];
		},
		
		//来源确认按钮
		sourceconfirm(e){
			this.form.source=e[0].label;
		},
		//阶段确认按钮
		rangeconfirm(e){
			this.form.range=e[0].label;
		},
		//弹出层几率确认按钮
		jlvconfirm(e){
			console.log(e[0].label);
			this.form.jlv=e[0].label;
			
		},
		//保存提交验证
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					/* console.log(valid); */
					console.log(this.form);
					console.log('验证通过');
					this.yanzheng = true;
					/* uni.setStorageSync('newclues',this.form);
					console.log(uni.getStorageSync('newclues')); */
				} else {
					console.log('验证失败');
					this.yanzheng = false;
				}
			});
		},
		//保存按钮
		clickRight() {
			this.submit();
			if (this.yanzheng) {
				uni.showToast({
					title: '保存成功'
				});
				this.submit();
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}, 1500);
			}
		},
		change() {
			console.log(this.checked);
		},
		//导航栏左键弹出取消
		clickLeft() {
			this.modalshow = true;
		},
		//取消弹出的确认按钮
		confirm() {
			uni.redirectTo({
				url: '/pages/index/index'
			});
			this.modalshow = false;
		},
		//取消弹出的确认按钮
		cancel() {
			this.modalshow = false;
		},
		//子组件传值调用参数
		editorblur(data){
			this.editordata=data;
			console.log(data);
		},
		actionSheetCallback(index) {
			this.form.sex = this.actionSheetList[index].text;
			console.log(index);
		},
		
		
	},
	watch: {
		productdata: function(val) {
			let that = this;
			this.totalprice = 0;
			this.totaldays = 0;
			val.forEach(function(currentValue, index) {
				that.totalprice += parseInt(currentValue[2]);

				console.log(that.totalprice);
				that.totaldays += parseInt(currentValue[3]);
				console.log(that.totaldays);
			});
			this.finallyprice = that.totalprice * this.totaldiscount * 0.01;
		},
		totaldiscount: function(val) {
			this.finallyprice = this.totalprice * this.totaldiscount * 0.01;
		}
	},
	components: { uniNavBar,Editor },
	onLoad() {
		 
		  
		  
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onShow() {
		
			let header = {
				//请求头
				'content-type': 'application/x-www-form-urlencoded'
			};
			console.log('onshow');
			
			/*  */
			this.http
				.sendRequest('/public/plugin/member_login/api_index/login', {
					type: 'user',
					appid: '76c8ec5451fc20e905f4cbbc61f8fb8e',
					key: '3ae25c65f44df2f0f60f6cbc1fd0a619',
					data: {
						user_login: 'admin',
						user_pass: '6xq6xq6xq'
					}
				})
				.then(res => {
					let token = res.data.data.token;
					let refresh_token = res.data.data.refresh_token;
					uni.setStorageSync('token', token);
					this.token=uni.getStorageSync('token');
				});
		/* 获取产品数据 */
		this.productdata = [['商城系统', '商城', 30000, 20], ['聊天系统', '商城-聊天', 5000, 4]];
	}
};
</script>

<style lang="scss">
/* .u-form-item--left__content--required[data-v-006449ec]{
	left: 76rpx;
} */
.formborder {
	/* padding: 10rpx 30rpx; */
	.formmain {
		background-color: #f9f9f9;
		border: 3px solid #f9f9f9;
		.firstform {
			margin-top: 50rpx;
			margin-bottom: 50rpx;
			padding: 10rpx 20rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			.firstone {
				color: #1678ff;
				line-height: 50rpx;
				margin-top: 10rpx;
			}
		}
		.formone {
			padding-left: 20rpx;
			background-color: #ffffff;
		}
		.secondform {
			margin-top: 50rpx;
			padding-left: 20rpx;
			background-color: #ffffff;
		}
		.thirdform {
			margin-top: 50rpx;
			padding-left: 20rpx;
			background-color: #ffffff;
			margin-bottom: 50rpx;
		}
		.rwuheight {
			line-height: 50rpx;
			padding-left: 20rpx;
		}
		.fourthform {
			/* margin-top: 50rpx; */
			padding-left: 20rpx;
			background-color: #ffffff;
			.zhaoxg {
				display: flex;
			}
		}
		.guanliancp {
			width: 750rpx;
			height: 340rpx;
			background-color: #f9f9f9;
			padding: 30rpx 20rpx;
			/* font-size: 14px;
			font-weight: 200; */
			.tabtab {
				border-top: 1px solid #797979;
				border-left: 1px solid #797979;
				width: 700rpx;

				.tabletr {
					display: flex;

					.tabletd {
						width: 140rpx;
						padding: 10rpx 0;
						text-align: center;
						border-bottom: 1px solid #797979;
						border-right: 1px solid #797979;
						color: #797979;
					}
				}
			}
			.daterules {
				margin-top: 38rpx;
				display: flex;
				/* width: 600rpx;
				height: 200rpx; */
				.date1 {
					width: 220rpx;
					height: 200rpx;
					display: flex;
					/* flex-wrap: nowrap; */
					justify-content: space-around;

					input[type='text'] {
						width: 10px;
						height: 20px;
					}
				}
			}
		}
		
		.agelimit{
			width: 730rpx;
			height: 320rpx;
			background-color: #FFFFFF;
			margin-left: 20rpx;
			padding-left: 36rpx;
		}
		.agemargin{
			margin-top: 40rpx;
		}
		.richlimit{
			width: 730rpx;
			height: 1200rpx;
			background-color: #FFFFFF;
			margin-left: 20rpx;
			padding-left: 36rpx;
		}
	}
}
</style>
